{% extends "base.html" %}


{% block title %}
    <title>晋哆咕-个人中心</title>
{% endblock %}


{% block css %}
    <style>
        .container {
            margin-top: 100px;
            background-image: url("/static/img/mainbg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .form-control {
            color: rgb(122, 199, 72);
        }
        .head {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .head input {
            width: 100px;
            height: 100px;
            position: absolute;
            opacity: 0;
        }
        .head img {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
        }
    </style>
{% endblock %}


{% block body %}
<h1 style="color: rgb(122, 199, 72)">今天也是闪闪发光的一天(✪ω✪)</h1>
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-group">
        {{ cf.head.label_tag }}
        <div class="head">
            <img src="/media/{{ request.user.head }}" alt="">
            {{ cf.head }}
        </div>
        {{ cf.username.label_tag }}
        {{ cf.username }}
        {{ cf.email.label_tag }}
        {{ cf.email }}
        {{ cf.telephone.label_tag }}
        {{ cf.telephone }}
        {{ cf.first_name.label_tag }}
        {{ cf.first_name }}
        {{ cf.last_name.label_tag }}
        {{ cf.last_name }}
    </div>
    <div class="form-group">
        {% if errors %}
        <p class="alert alert-danger">{{ errors }}</p>
        {% endif %}
    </div>
    <button type="submit" class="btn btn-default">确认修改</button>
</form>
{% endblock %}


{% block js %}
    <script>
        window.onload = function(){
            let head_input = document.querySelector(".head input");
            let head_img = document.querySelector(".head img");

            head_input.onchange = function(){
                const file = head_input.files[0];
                if (file) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        head_img.src = e.target.result;
                    };

                    reader.readAsDataURL(file);
                }
            }
        }
    </script>
{% endblock %}

